<template>
    <div>
        <div class="container">
            <el-input class="container_input" placeholder="请点击选择" v-model="selectTitle" :disabled="true" size="small" @click="hanleSelect">
            </el-input>
<!--            <el-button @click="hanleSelect" size="small">点击选择</el-button>-->
            <el-link class="container_el-link" :underline="false" @click="hanleSelect">点击选择</el-link>
        </div>
        <el-dialog :title="'请选择'+pData.nameZh" :visible.sync="open" width="30%" class="dialogMultipleTree"
                   append-to-body :close-on-click-modal="false">
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
            </el-input>

            <div style="margin:10px 5px">
                <el-button size="mini" type="primary" @click="setAllExpand(true)">全部展开</el-button>
                <el-button size="mini" type="primary" @click="setAllExpand(false)">全部折叠</el-button>
                <el-button size="mini" type="primary" @click="checkedAll(true)">全选选中</el-button>
                <el-button size="mini" type="primary" @click="checkedAll(false)">全部取消</el-button>
            </div>
            <el-tree
                class="filter-tree"
                :data="options"
                :props="defaultProps"
                :default-checked-keys="defaultCheckNodes"
                :default-expanded-keys="defaultTreeKeys"
                :filter-node-method="filterNode"
                node-key="id"
                ref="multipleTree"
                show-checkbox
                check-strictly
                @check-change="orgCheckChange">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <!--          <el-button type="primary" @click="dataEcho(selectVal)">确 定</el-button>-->
                <el-button @click="open=false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {ref, inject, watch} from "vue";
    import toTreeData from '@/utils/toTreeData.js';

    // pData: {
    //     selectObj: [],
    //     zhi: null,
    //     nameEn: 'wordPid',
    //     nameZh: '父id',
    //     onclickName: 'formChangeVal'
    // }

    export default {
        name: "selectMultiple",
        props: {
            pData: Object
        },
        data() {
            return {
                selectVal: "",
                selectTitle: "",
                filterText: "",
                open: false,
                options: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                defaultCheckNodes: [],
                defaultTreeKeys: [],
                separator: ",",
            }
        },
        mounted() {
            this.init();
        },
        watch: {
            filterText(val) {
                this.$refs.multipleTree.filter(val);
            },
            selectVal(val) {
                this.dataEcho(val);
            }
        },
        methods: {
            hanleSelect() {
                this.open = true;
                this.filterText = '';
            },
            init() {
                // console.log(this.pData.selectObj)
                this.options = toTreeData(this.pData.selectObj);
                // console.log(this.options)
                //设置默认选中
                let checkValueList = [];
                if (this.pData.zhi) {
                    checkValueList = (this.pData.zhi).split(this.separator)
                }
                //设置默认展开，展开为默认选中的父节点
                this.pData.selectObj.filter(x => checkValueList.indexOf(x.value) > -1).map(item => {
                    //找到选中节点的父id.加入展开列表
                    if (this.defaultTreeKeys.indexOf(item.pid) == -1) {
                        this.defaultTreeKeys.push(item.pid)
                    }
                    //记录选中接口id
                    this.defaultCheckNodes.push(item.id);
                    //记录选中节点名称
                    this.selectVal += item.value + this.separator;
                    this.selectTitle += item.label + this.separator;
                });
            },
            dataEcho(val) {
                let nameEn = this.pData.nameEn;
                let clickName = this.pData.onclickName;
                const data = {};
                data[nameEn] = val;
                this.$emit(clickName, data)
            },
            //设置全部展开和折叠。state参数为bool值
            setAllExpand(state) {
                var nodes = this.$refs.multipleTree.store.nodesMap;
                for (var i in nodes) {
                    nodes[i].expanded = state;
                }
            },
            //全选与取消全选
            checkedAll(state) {
                if (state) {
                    this.$refs.multipleTree.setCheckedNodes(this.pData.selectObj);
                } else {
                    this.$refs.multipleTree.setCheckedKeys([]);
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            orgCheckChange(data, checked, indeterminate) {
                let checkedKeys = this.$refs.multipleTree.getCheckedKeys();
                let ztrrList = this.pData.selectObj;
                this.selectVal = "";
                this.selectTitle = "";
                checkedKeys.map(treeId => {
                    let filterTreeNode = ztrrList.filter(itme => itme.id == treeId);
                    if (filterTreeNode.length > 0) {
                        this.selectVal += filterTreeNode[0].value + this.separator;
                        this.selectTitle += filterTreeNode[0].label + this.separator;
                    }
                });
                this.selectVal = this.selectVal != '' ? this.selectVal.substr(0, this.selectVal.length - 1) : '';
                this.selectTitle = this.selectTitle != '' ? this.selectTitle.substr(0, this.selectTitle.length - 1) : '';
            }
        },
    }
</script>
<style>
    /*.dialogMultipleTree .el-dialog{*/
    /*  height: 500px!important;*/
    /*}*/

    .container{
        position: relative;
    }
    .container_input{
        width: 100%;
    }
    .container_el-link{
        position: absolute;
        right: 10px;
    }
</style>

<style scoped>
    .el-select {
        width: 100%;
    }

    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        padding: 0;
    }

    .el-select-dropdown__item.selected {
        font-weight: normal;
    }

    ul li >>> .el-tree .el-tree-node__content {
        height: auto;
    }

    .el-tree-node__label {
        font-weight: normal;
    }

    /*.el-tree>>>.is-current .el-tree-node__label {*/
    /*    color: #409EFF;*/
    /*    font-weight: 700;*/
    /*}*/

    .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }

    .ld-select_tree {
        text-align: right;
        padding-right: 20px;
        position: absolute;
        bottom: 10px;
        right: -4px;
    }

    .ld-select .el-input__icon {
        line-height: 32px !important;
    }

</style>
